<template>
  <div class="layout">
    <div class="breadcrumb-box">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          :to="{
            path: '/project/dataset/label/lis',
            query: { id: $route.query.id },
          }"
        >
          数据标注
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ "图像分类" }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="working-area">
      <el-tabs
        v-model="activeTabs"
        type="card"
        @tab-click="handleClick"
        class="my-defined-tabs"
      >
        <el-tab-pane label="工作台" name="1" />
        <el-tab-pane label="标签管理" name="2" />
      </el-tabs>
      <div class="working-box" v-show="activeTabs == '1'">
        <div class="image-area">
          <div class="tool-bar">
            <div>
              <el-button :type="typeStatus == '' ? 'primary': ''" @click="cutStatus('')">全部{{ anntasksDetail.total }}</el-button>
              <el-button :type="typeStatus == '0' ? 'primary': ''" @click="cutStatus('0')">未标注{{ anntasksDetail.total - anntasksDetail.annFinished }}</el-button>
              <el-button :type="typeStatus == '3' ? 'primary': ''" @click="cutStatus('3')">已标注{{ anntasksDetail.annFinished }}</el-button>
              <span class="screen-label">标签</span>
              <el-select v-model="screenLabel" clearable placeholder="请选择" @change="getFilesLis">
                <el-option 
                v-for="(e, i) in tagNames"
                :key="i"
                :label="e.name"
                :value="e.id" />
              </el-select>
            </div>
            <div>
              <v-btn type="hollow">示例</v-btn>
              <v-btn type="hollow" @click="fileSync">同步图片<i class="el-icon-warning"></i></v-btn>
              <v-btn type="primary" @click="submit">保存标注(S)</v-btn>
            </div>
          </div>

          <div id="canvasToolsDiv" class="canvas-tools-div">
              <div id="toolbarDiv" ref="toolbarDiv"></div>
              <div class="prev" @click="toPrev" :style="{top: `${(h/2 - 175) - 24}px`}"></div>
              <div id="selectionDiv">
                  <div id="editorDiv" ref="editorDiv"></div>
              </div>
              <div class="next" @click="toNext" :style="{top: `${(h/2 - 175) - 24}px`}"></div>
              <div class="file-lis-box" v-if="filesLis.length">
                <div class="file-lis-btn file-lis-prev" @click="pagingPrev"></div>
                <ul class="file-lis">
                  <li v-for="e in computePaging" :key="e" @click="clickPaging(e)" :class="{'active': listPicActive == e}">
                    <div :class="['img-bg', {'no-img': !filesLis[e - 1]}]">
                      <img :src="filesLis[e - 1].imgUrl" alt="" v-if="filesLis[e - 1]">
                      <span v-else></span>
                    </div>
                  </li>
                </ul>
                <div class="file-lis-btn file-lis-next" @click="pagingNext"></div>
              </div>
              <!-- <el-carousel 
                height="150px" 
                ref="fileLis"
                :autoplay="false" 
                @change="carouselChange">
                <el-carousel-item v-for="ele in filesLisPagingNum" :key="ele">
                  <ul class="file-lis">
                    <li v-for="(e, i) in filesLis" :key="i">
                      <img :src="e.imgUrl" alt="">
                    </li>
                  </ul>
                </el-carousel-item>
              </el-carousel> -->
              <!-- <div class="">
                <ul>
                  <li></li>
                </ul>
              </div> -->
              <!-- filesLis -->
          </div>
        </div>
        <div class="label-area">
          <h3>
            标签栏
            <el-button type="text" @click="addLabel" icon="el-icon-plus" class="add-btn"
              >添加</el-button
            >
          </h3>
          <div class="l-a-serch">
            <el-input
              type="text"
              v-model="searchName"
              placeholder="请输入标签"
              prefix-icon="el-icon-search"
              @focus="isFocus = true"
              @blur="isFocus = false"
              @input="getAllLabel"
            />
          </div>
          <p class="l-a-hint">请根据图片内容选择唯一标签</p>
          <ul class="l-a-lis">
            <li
              v-for="(e, i) in tagNames"
              :key="i"
              @click="doTask(i)"
              :class="{ active: i == labelsActive }"
            >
              <span class="lis-word">{{ e.name }}</span>
              <span class="lis-shortcut">快捷键</span>
              <span class="lis-key">{{ i + 1 }}</span>
            </li>
          </ul>
        </div>
      </div>
      <my-labels ref="myLabels" v-show="activeTabs == '2'" />
    </div>
  </div>
</template>
<script>
import { CanvasTools } from 'vott-ct'
import { Base64 } from "js-base64";
import { getCookie } from "@/utils/tool";
import { domain } from "@/config";
import axios from 'axios'
import { getLabelsAll, commitAnntasks, fileSync, getAnntasksDetail, getFiles } from '@/api/label'
// import { getDownloadKey } from "@/api/file";
import myLabels from './module/labels.vue'
const fullToolbarSet = CanvasTools.Editor.FullToolbarSet
export default {
  data() {
    const paletteSettings = {
        lightness: 0.6,
        lightnessVariation: 0.1,
        minGrayness: 0.2,
        maxGrayness: 0.6,
        granularity: 100,
        abRange: 1.3,
    };
    return {
        palette: new CanvasTools.Core.Colors.Palette(paletteSettings),
        h: 0,
        fullToolbarSet: null,
        images: '',
        tagNames: [],
        activeTag: null,
        typeVal: '',
        editorContainer: null,
        toolbarContainer: null,
        lib: {},
        typeMap: [],
        editor: null,
        fileId: '',
        activeTabs: "1",
        screenLabel: "",
        searchName: "",
        labels: [],
        labelsActive: 0,
        typeStatus: '',
        anntasksDetail: {},
        imgSize: {},
        isFocus: false,
        file: {},
        page: 1,
        filesLis: [],
        filesLisPagingNum: 0,
        listPicActive: 1
    };
  },
  computed: {
    computePaging () {
      let w = document.documentElement.clientWidth
      let navW = localStorage.getItem('menu_project') == 'false' ? 257 : 65
      let boxWidth = w - navW - 290 - 64 - 32 - 20 - 80
      if (w < 1560) {
        boxWidth = w - navW - 64 - 32 - 20 - 80
      }
      return parseInt(boxWidth / 240)
    },
  },
  components: { myLabels },
  methods: {
   async pagingPrev () {
      if (this.page != 1) {
        this.page --
        await this.getFilesLis()
        this.listPicActive = this.computePaging
        this.clickPaging(this.computePaging)
      }
    },
    async pagingNext () {
      if (this.page != this.filesLisPagingNum) {
        this.page ++
        await this.getFilesLis()
        this.listPicActive = 1
        this.clickPaging(1)
      }
    },
    async clickPaging(e) {
      this.listPicActive = e
      let res = this.filesLis[e - 1]
      if (!res) {
        return
      }
      this.file = res
      let imges = await this.getImageSrc(res.datasetId, [`editable/${res.url}`])
      this.fileId = res.id
      this.taskPic = imges
      
      // this.loadImage(this.images, (image) => {
      //   this.imgSize = {
      //     w: image.width,
      //     h: image.height
      //   }
      // });
      this.loadImage(this.file.imgUrl, (image) => {
        this.imgSize = {
          w: image.width,
          h: image.height
        }
        this.editor.addContentSource(image);
        this.getRegionData()
      });
      this.labelsActive = 0
    },
    
    toPrev() {
      if (this.listPicActive == 1) {
        this.pagingPrev()
        return
      }
      this.listPicActive --
      this.clickPaging(this.listPicActive)
    },
    toNext() {
      if (this.listPicActive == this.computePaging) {
        this.pagingNext()
        return
      }
      this.listPicActive ++
      this.clickPaging(this.listPicActive)
    },

    carouselChange(e) {
      console.log(e)
      this.page = e + 1
      this.getFilesLis()
    },
    cutStatus (status) {
      this.typeStatus = status
      // this.getfile()
      this.screenLabel = ''
      this.getFilesLis()
    },
    async fileSync () {
      await fileSync({ id: this.$route.query.taskId })
      this.getFilesLis()
    },
    handleClick() {
      if (this.activeTabs == '2') {
        this.$refs.myLabels.getLabelsLis()
        document.removeEventListener("keydown", this.switchover)
      }
      if (this.activeTabs == '1') {
        this.getAllLabel()
        this.paletteSwatches()
        document.addEventListener("keydown", this.switchover)
      }
    },
    addLabel() {
      this.activeTabs = '2'
      this.$refs.myLabels.getLabelsLis()
      this.$refs.myLabels.add()
    },
    async getAllLabel() {
      let res = await getLabelsAll({ id: this.$route.query.taskId, name: this.searchName })
      res.forEach((e, i) => {
        e.indexId = i
      })
      this.tagNames = res
    },
    doTask(i) {
      this.labelsActive = i;
      this.typeVal = this.typeMap[i].name
      this.chageType(this.typeVal)
    },
    switchover(e) {
      if (this.isFocus) return
      var currKey=0
      e=e||event||window.event;
      currKey = e.keyCode||e.which||e.charCode;
      let codes = []
      
      for (let i = 49; i < 58; i ++) {
        codes.push(i)
      }
      if (codes.indexOf(currKey) != -1) {
        this.typeVal = this.typeMap[codes.indexOf(currKey)].name
        this.chageType(this.typeVal)
        this.labelsActive = codes.indexOf(currKey)
      }
      
      if(currKey == 83 && (e.ctrlKey||e.metaKey)){
          
          this.submit()
          
          e.preventDefault();
          return false;
      }
      
      if(currKey == 83){
          
          this.submit()
          
          e.preventDefault();
          return false;
      }
      if (e.keyCode == 27) {
          e.preventDefault();
          return false;
      }
      // if (e.keyCode == 8) {
      //     e.preventDefault();
      //     return false;
      // }
      if (e.keyCode == "37") {
        this.toPrev()
        this.$refs.carousel && this.$refs.carousel.prev();
      }
      if (e.keyCode == "39") {
        this.toNext()
        this.$refs.carousel && this.$refs.carousel.next();
      }
    },
    // toPrev() {
    //   this.getfile(0)
    // },
    // toNext() {
    //   this.getfile(1)
    // },
    loadImage (path, onready) {
        const image = new Image();
        image.addEventListener("load", (e) => {
            onready(e.target);                
        });
        image.src = path;
    },
    chageType (val) {
        let [temp] = this.typeMap.filter(e => e.name == val)
        this.activeTag = temp;
    },
    populateTags (tags) {
        this.typeMap = tags
        this.activeTag = tags[0]
        this.typeVal = tags[0].tagName
    },
    handleToolbar () {
        const files = require.context('@/assets/icons', true, /\.svg$/)
        files.keys().forEach(key => {
            let k = key.replace('./', '')
            let v = files(key).replace('/img', '')
            this.lib[k] = v
        })
        this.fullToolbarSet = []
        fullToolbarSet.forEach(e => {
            let temp = {}
            for (let i in e) {
                temp[i] = e[i]
            }
            this.fullToolbarSet.push(temp)
        })
        // this.fullToolbarSet = fullToolbarSet

        this.fullToolbarSet.shift()
        this.fullToolbarSet.splice(6, 1)
        this.fullToolbarSet.forEach(e => {
          e.iconFile = this.lib[e.iconFile]
          e.tooltip = ''
        })
    },
    computeUrl (relativePaths) {
      return `${domain}serv-file/api/2/file/preview/${
        this.userInfo.orgId
        }/dataset/${
          this.file.datasetId
        }/${
          encodeURIComponent(Base64.encode(relativePaths))
        }`
    },
    async getImageSrc (bizId, relativePaths) {
      let info = await this.$myInfo(this)
      let tenantId = info && info.orgId
      // let key = await getDownloadKey({
      //   bizId,
      //   cacheExpireType: '',
      //   relativePaths,
      //   temporaryExpireDuration: 0,
      //   tenantId,
      //   type: 'dataset'
      // })
      return `${domain}serv-file/api/2/file/preview/${
        tenantId
        }/dataset/${
          bizId
        }/${
          encodeURIComponent(Base64.encode(relativePaths))
        }`
      // return `${domain}serv-file/api/2/file/download?fileId=${key.data.fileId}`
    },
    async getDetail () {
      let res = await getAnntasksDetail({ id: this.$route.query.taskId })
      this.userInfo = await this.$myInfo(this)
      this.anntasksDetail = res
      this.file.datasetId = res.datasetId
      if (res.currentFileInfo) {        
        this.file = res.currentFileInfo
        this.file.datasetId = res.datasetId
      } else {
        // this.getfile(1)
      }
    },
    // computePaging () {
    //   return parseInt(this.$refs.fileLis.$el.offsetWidth / 140)
    // },
    async getFilesLis () {
      let res = await getFiles({
        id: this.$route.query.taskId,
        current: this.page,
        size: this.computePaging,
        status: this.typeStatus, 
        labelId: this.screenLabel,
      })
      res.result.forEach(e => {
        e.imgUrl = this.computeUrl(`editable/${e.url}`)
      })
      this.filesLis = res.result
      this.filesLisPagingNum = Math.ceil(res.total / this.computePaging)
      this.clickPaging(1)
    },
    // async getFilesLis () {
    //   let res = await getFiles({
    //     id: this.$route.query.taskId,
    //     current: this.page,
    //     size: 100,
    //     status: this.typeStatus, 
    //     labelId: this.screenLabel,
    //   })
    //   res.result.forEach(e => {
    //     e.imgUrl = this.computeUrl(e.url)
    //   })
    //   this.filesLis = res.result
    //   this.filesLisPagingNum = Math.ceil(res.total / this.computePaging())
    // },
    async getData () {
      await this.getDetail()
      this.getFilesLis()
      // if (!this.file.datasetId) {
      //   return
      // }
      // let imges = await this.getImageSrc(this.file.datasetId, [`editable/${this.file.url}`])
      // this.fileId = this.file.id
      // this.images = imges
      // this.loadImage(this.images, (image) => {
      //   this.imgSize = {
      //     w: image.width,
      //     h: image.height
      //   }
      //   this.editor.addContentSource(image);
      // });
      
    },
    // async getfile (direction) {
    //   let desc = '0'
    //   let tempTypeStatus = this.typeStatus
    //   if (direction == 1) {
    //     desc = 1
    //   }
    //   if (direction == 0) {
    //     desc = 0
    //   }
    //   if (this.screenLabel) {
    //     this.typeStatus = 3
    //   } else {
    //     this.typeStatus = tempTypeStatus
    //   }
    //   let res = await getFile({
    //     id: this.$route.query.taskId, 
    //     status: this.typeStatus, 
    //     labelId: this.screenLabel,
    //     desc
    //   })
    //   if (!res.url) {
    //     // if (direction == 0) {
    //     //   this.$message.error('没有下一个文件')
    //     //   return
    //     // }
    //     // this.$message.error('没有文件')
    //     return
    //   }
    //   this.file = res
    //   let imges = await this.getImageSrc(res.datasetId, [`editable/${res.url}`])
    //   this.fileId = res.id
    //   this.images = imges
    //   this.loadImage(this.images, (image) => {
    //     this.imgSize = {
    //       w: image.width,
    //       h: image.height
    //     }
    //     this.editor.addContentSource(image);
    //   });
    //   this.getRegionData()
    //   // } else {
    //   //     this.$message({
    //   //         message: "该任务已完结",
    //   //         type: "success"
    //   //     });
    //   //     setTimeout(() => {
    //   //         this.$router.push({
    //   //             path: '/datasets/create/mytask'
    //   //         })
    //   //     }, 2200)
    //   // }
    // },
    dataURLtoFile(dataurl, filename) {
      //将base64转换为文件
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    async writeFile (template, fileName, fn) {
      
      let info = await this.$myInfo(this);
      let uid = info.orgId;
      let filesFile = this.dataURLtoFile(
        `data:text/${this.suffix};base64,${Base64.encode(JSON.stringify(template))}`,
        fileName
      );
      let data = new FormData();
      data.append("chunkNumber", 1);
      data.append("totalChunks", 1);
      data.append("repeType", '');
      data.append("filename", fileName);
      data.append("relativePath", `/editable/.annotation/${this.file.name}.json`);
      data.append("tenantId", uid);
      data.append("type", 'dataset');
      data.append("uuid", this.file.datasetId);
      data.append("file", new Blob([filesFile]), fileName);
      axios({
        headers: {
          Authorization: decodeURIComponent(getCookie("login_ticket")),
          "Content-Type": "multipart/form-data",
        },
        data,
        method: "post",
        url: `${domain}serv-file/api/2/file/upload`,
      }).then(async e => {
        if (e.data.code && e.data.code == 401) {
          this.$router.push({
            path: "/login",
          });
          return;
        }
        if (fn) {
          fn()
        }
      })
    },
    async submit () {
      let info = await this.$myInfo(this);
      let template = {}
      template.source = {}
      template.source.imageInfo = {}
      template.source.imageInfo.contributor = info.id
      template.source.imageInfo.createTime = new Date().getTime()
      template.source.imageInfo.width = this.imgSize.w
      template.source.imageInfo.height = this.imgSize.h
      template.source.path = `../${this.file.url}`
      template.source.name = this.file.name
      template.annotation = {}
      template.annotation.targetDetection = []
      template.annotation.annotateTime = new Date().getTime()
      template.annotation.taskId = this.$route.query.taskId
      let label = this.editor.regionsManager.regions
      console.log(label)
      label.forEach( e => {
        let target = {}
        // target.area = e.regionData.height * e.regionData.width
        target.bbox = [e.regionData.x, e.regionData.y, e.regionData.width, e.regionData.height]
        target.echoData = JSON.stringify(e)
        // target.category_id = this.labelsActive
        // target.id = this.labelsActive.id
        target.category_id = this.tagNames[this.labelsActive].indexId
        target.segmentation = []
        e.regionData.points.forEach(e => {
          target.segmentation.push(e.x)
          target.segmentation.push(e.y)
        })
        template.annotation.targetDetection.push(target)
      })

      
      this.writeFile(template, `${this.file.name}.json`, async () => {


        let labelIds = label.map(e => e.ID)
        let annTaskFileId = this.file.id
        let id = this.$route.query.taskId
        
        await commitAnntasks({ id, annTaskFileId, labelIds })
        this.editor.deleteAllRegions()
        await this.getDetail()
        this.toNext()
        // this.getfile(1)
        this.$message.success("保存成功");
          
      });
      this.getJsonFile(`recorded.json`, e => {
        let template = {}
        if (e.filesArry) {
          template = e
        } else {
          template.filesArry = []
          template.filesArry.push({
            fileName: 'aa',
            labelIds: label
          })
        }
        console.log(template)
        this.writeFile(template, `recorded.json`)
      })
    },
    async getJsonFile (fileName, fn) {
      let info = await this.$myInfo(this);
      let uid = info.orgId;
      axios({
        headers: {
          'Authorization': decodeURIComponent(getCookie('login_ticket'))
        },
        data: {
          bizId: this.file.datasetId,
          relativePath: `/editable/.annotation/${fileName}`,
          tenantId: uid,
          type: 'dataset'
        },
        method: 'post',
        url: `${domain}serv-file/api/2/file/preview`,
      }).then(e => {
        if (typeof (e.data) == 'object' || typeof (e.data) == 'string' ) {
          fn(e.data)
        } else {
          console.log('没有标注')
        }
      }).catch(e => {
        console.log(e)
      })
    },
    getRegionData () {
      this.getJsonFile(`${this.file.name}.json`, e => {
        if (e && e.annotation && e.annotation.targetDetection  && e.annotation.taskId == this.$route.query.taskId) {
          let echoData = e.annotation.targetDetection.map( e => JSON.parse(e.echoData))
          this.editor.deleteAllRegions()
          echoData.forEach(e => {
            let temp = []
            e.regionData.points.forEach(e => {
                // 处理Point点 生成 Point对象
                let P = new CanvasTools.Core.Point2D(e.x, e.y)
                
                temp.push(P)

            })
            e.regionData.points = temp
            
            let [ nowadayTags ] = this.typeMap.filter(item => item.name == e.tags.primary.name)
            let tags = new CanvasTools.Core.TagsDescriptor(nowadayTags);
            // 查找 tags 标签
            let regionData = new CanvasTools.Core.RegionData(
                e.regionData.x, 
                e.regionData.y, 
                e.regionData.width, 
                e.regionData.height, 
                e.regionData.points, 
                e.regionData.type
            )
            // 回显
            
            this.editor.addRegion(e.ID, regionData, tags);
          })
        }
      })
      
      
      // this.editor.regionsManager.regions = JSON.parse(localStorage.getItem('aaaa'))
    },

    paletteSwatches () {
      this.palette.swatches(this.tagNames.length).then((gamut) => {
        // Create collection of tags using names and generated colors
        const tags = gamut.map((color, index) => {
            return new CanvasTools.Core.Tag(this.tagNames[index].name, color);
        });
        this.populateTags(tags);
        this.editor.unfreeze();
        this.editor.enable();
      });
    }
  },
  async mounted() {
    this.h = document.documentElement.clientHeight
    document.addEventListener("keydown", this.switchover);
    this.$EventBus.$emit('hideCollapse', true)
    this.editorContainer = this.$refs.editorDiv;
    this.toolbarContainer = this.$refs.toolbarDiv;
    this.editor = new CanvasTools.Editor(this.editorContainer).api;
    this.handleToolbar()
    this.editor.addToolbar(this.toolbarContainer, this.fullToolbarSet, "/img/");
    await this.getAllLabel()
    await this.getData()
    
    this.editor.onSelectionEnd = (regionData) => {
      
        // Use active tag to create TagsDescriptor object
        const tags = new CanvasTools.Core.TagsDescriptor(this.activeTag);            

        window.regionData = regionData
        let temp = {}
        for (let i in regionData) {
          temp[i] = regionData[i]
        }
        this.editor.addRegion(this.tagNames[this.labelsActive].id, regionData, tags);
        
    };
    // Freeze and disable editor till swatches are ready
    this.editor.freeze();
    this.editor.disable();
    
    
    this.paletteSwatches()
  },
  destroyed() {
    document.removeEventListener("keydown", this.switchover);
    this.$EventBus.$emit('hideCollapse', false)
  },
};
</script>

<style lang="less" scoped>
.layout {
  padding: 16px;
  .working-area {
    background: #fff;
    margin-top: 16px;
    padding: 16px 32px;
    box-shadow: 0px 2px 16px 0px rgba(30, 36, 128, 0.07);
    border-radius: 2px;
  }
}
.tool-bar {
  display: flex;
  width: 100%;
  margin-top: 16px;
  justify-content: space-between;
  .screen-label {
    margin: 0 10px 0 20px;
  }
}
.working-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  .image-area {
    flex: 1;
    padding-right: 16px;
    min-width: 900px;
  }
  .label-area {
    width: 288px;
    border-left: 1px solid #e4e7ed;
    border-right: 1px solid #e4e7ed;
    h3 {
      padding: 18px 0 18px 16px;
      line-height: 20px;
      font-size: 14px;
      border-bottom: 1px solid #e4e7ed;
      position: relative;
      .add-btn {
        position: absolute;
        right: 18px;
        top: 6px;
      }
    }
    .l-a-serch {
      padding: 8px 16px;
    }
    .l-a-hint {
      padding: 24px 0 0 16px;
      color: #909399;
      line-height: 20px;
    }
    .l-a-lis {
      padding: 4px 16px 0 16px;
      li {
        margin-top: 4px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        border: 1px solid #e3e3e3;
        padding: 0 10px;
        display: flex;
        cursor: pointer;
      }
      // span{
      //   float: left;
      // }
      .lis-word {
        flex: 1;
        color: #303133;
      }
      .lis-shortcut {
        width: 42px;
        font-size: 12px;
        color: #909399;
      }
      .lis-key {
        width: 20px;
        height: 18px;
        line-height: 18px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #c0c4cc;
        display: block;
        text-align: center;
        margin-top: 9px;
      }
      li.active,
      li:hover {
        border: 1px solid #4285f4;
      }
    }
  }
  .carousel-box {
    margin-top: 40px;
  }
}
@media screen and (max-width: 1560px) {
  .label-area {
    display: none;
  }
}
// body {
//     margin: 20px;   
//     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
// }

// #controls div {
//     margin: 20px 0;
// }

// .canvas-box{
//     height: 100%;
//     width: 100%;
// }
// #canvasToolsDiv {        
//     display: grid;
//     width: 100%;
//     height: 100%;
//     grid-template-columns: 64px 1fr;
//     grid-template-rows: 100%;

//     margin:0;
//     background: rgb(64,64,64);
// }
#toolbarDiv {
    position: absolute;
    left: -54px;
    top: 0px;
    z-index: 999;
    height: 486px;
    /deep/ svg{
      width: 64px;
      height: 100%;
      margin-right:5px;
      background: #FFF;
      box-shadow: 0 0 0.5px #999, 5px 0px 10px -5px rgba(0, 0, 0, 0.8);
    }
}
.canvas-tools-div{
  margin-top: 16px;
  padding: 0 12px;
  position: relative;
}
.prev{
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  left: 10px;
  z-index: 999;
  background: url(~@/assets/img/prev.png) no-repeat center center #FFF;
  background-size: 100% 100%;
  cursor: pointer;
}
.next{
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  right: 10px;
  z-index: 999;
  background: url(~@/assets/img/next.png) no-repeat center center #FFF;
  background-size: 100% 100%;
  cursor: pointer;
}
// #toolbarDiv {
//     grid-row: 1;
//     grid-column: 1/2;
//     z-index: 10;
//     height: 100%;
//     /deep/ svg{
//       width: 64px;
//       height: 100%;
//       margin-right:5px;
//       background: #666;
//       box-shadow: 0 0 0.5px #999, 5px 0px 10px -5px rgb(0,0,0);
//     }
// }


// #selectionDiv {
//     grid-row: 1;
//     grid-column: 2/3;
//     justify-self: center;
//     align-self: center;
//     margin: 5px;
//     width: calc(100% - 10px);
//     height: calc(100% - 10px);
//     background: rgb(64,64,64);   
// }

// #editorDiv{
//     height: calc(100% - 80px);
// }

// #editorDiv svg {
//     box-shadow: 0px 0px 0.25px #999, 0px 0px 10px rgb(0,0,0);
// }
.file-lis-box{
  overflow: hidden;
  border-top: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  margin-top: 32px;
  .file-lis-btn{
    // icon-next-btn.png
    float: left;
    width: 30px;
    height: 160px;
    background: url(~@/assets/img/icon-next-btn.png) no-repeat#DCDFE6 0 center;
    background-size: 30px auto;
    cursor: pointer;
  }
  .file-lis-prev{
    transform: rotate(180deg);
  }
  .file-lis{
    float: left;
    width: calc(100% - 80px);
    display: flex;
    justify-content: space-between;
    margin: 10px 10px;
    li{
      // flex: 1;
      box-sizing: border-box;
      border: 2px solid #fff;
      cursor: pointer;
      .img-bg{
        background: #303133;
        width: 210px;
        height: 140px;
        position: relative;
      }
      .no-img{
        background: #FFF;
      }
      img{
        display: block;
        max-width: 100%;
        max-height: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

      }
    }
    .active{
      border: 2px solid rgba(66, 133, 244, 1);
    }
  }
}
</style>
